import React, { useState, useEffect } from 'react';
import { ConfigProvider, Layout, Switch, Typography } from 'antd';
import { BulbOutlined, BulbFilled } from '@ant-design/icons';
import TodoList from './components/TodoList';
import DateArchive from './components/DateArchive';
import theme from './theme';
import './App.css';

const { Header, Content, Sider } = Layout;
const { Title } = Typography;

function App() {
  const [isDarkMode, setIsDarkMode] = useState(false);
  const [selectedDate, setSelectedDate] = useState(null);
  const [collapsed, setCollapsed] = useState(false);
  const [todos, setTodos] = useState([
    {
      id: 1,
      name: "完成前端开发",
      content: "实现一个极客风格的 Todo List 应用",
      createTime: new Date().toISOString(),
      deadTime: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(),
      isCompleted: false
    },
    {
      id: 2,
      name: "学习 React Hooks",
      content: "深入学习 useState, useEffect, useCallback 等 React Hooks 的使用方法",
      createTime: new Date().toISOString(),
      deadTime: new Date(Date.now() + 2 * 24 * 60 * 60 * 1000).toISOString(),
      isCompleted: true
    }
  ]);
  const currentTheme = isDarkMode ? theme.dark : theme.light;

  useEffect(() => {
    document.body.style.backgroundColor = currentTheme.colorBgLayout;
  }, [isDarkMode, currentTheme.colorBgLayout]);

  return (
    <ConfigProvider
      theme={{
        token: currentTheme,
      }}
    >
      <Layout style={{ minHeight: '100vh', background: currentTheme.colorBgLayout }}>
        <Header style={{ 
          background: currentTheme.colorBgContainer,
          boxShadow: currentTheme.boxShadow,
          position: 'fixed',
          width: '100%',
          zIndex: 1,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          padding: '0 24px'
        }}>
          <Title level={3} style={{ margin: 0, color: currentTheme.colorText }}>
            米饭待办
          </Title>
          <Switch
            checkedChildren={<BulbFilled />}
            unCheckedChildren={<BulbOutlined />}
            checked={isDarkMode}
            onChange={setIsDarkMode}
          />
        </Header>
        <Layout style={{ marginTop: 64 }}>
          <Sider
            width={250}
            collapsible
            collapsed={collapsed}
            onCollapse={setCollapsed}
            style={{
              background: currentTheme.colorBgContainer,
              position: 'fixed',
              left: 0,
              top: 64,
              height: 'calc(100vh - 64px)',
              zIndex: 1,
              boxShadow: currentTheme.boxShadow,
            }}
          >
            <DateArchive
              theme={currentTheme}
              onDateSelect={setSelectedDate}
              selectedDate={selectedDate}
              todos={todos}
            />
          </Sider>
          <Content style={{ 
            marginLeft: collapsed ? 80 : 250,
            padding: '24px',
          }}>
            <div style={{
              maxWidth: 1200,
              width: '100%',
              margin: '24px auto'
            }}>
              <TodoList 
                theme={currentTheme} 
                selectedDate={selectedDate}
                todos={todos}
                setTodos={setTodos}
              />
            </div>
          </Content>
        </Layout>
      </Layout>
    </ConfigProvider>
  );
}

export default App; 